<template>
  <div>
    <nav-bar></nav-bar>
    <div class="login-container">

      <div class="login-form">
        <h1>Signup</h1>
        <form @submit.prevent="login">
          <div class="form-group">
            <input type="text" v-model="payload.username" placeholder="Username" required>
          </div>
          <div class="form-group">
            <input type="password" v-model="payload.password1" placeholder="Password" required>
          </div>
          <button type="submit">Signup</button>
        </form>
      </div>

      <div class="login-form">
        <h1>Login</h1>
        <form @submit.prevent="getUserInfo">
          <div class="form-group">
            <input type="text" v-model="payload.userId" placeholder="User ID" required>
          </div>
          <div class="form-group">
            <input type="password" v-model="payload.password" placeholder="Password" required>
          </div>
          <button type="submit">Login</button>
        </form>
      </div>

    </div>
  </div>
</template>


<script>
import { mapActions } from 'vuex';
import NavBar from './Page/NavBar.vue';
import axios from 'axios';

export default {
  components: { NavBar },
  data() {
    return {
      payload: {
        // 根据实际需求定义参数
        userId:'',
        username: '',
        password: '',
        password1:''
      }
    };
  },
  methods: {
    ...mapActions(['loginAction']),
    async login() {
    try {
      // 调用注册接口，传递用户名和密码
      const response = await axios.post('https://localhost:7293/api/Users', {
        userId: this.payload.username,
        userName:this.payload.username,
        userPassword: this.payload.password1,
      });

      // 假设注册成功后返回的用户名为 response.data.username
      const username = response.data.username;

      // 存储用户名到本地存储
      localStorage.setItem('username', username);

      // 进行登录成功后的逻辑处理
      // ...

    } catch (error) {
      // 处理登录失败后的逻辑
      console.error('Login failed:', error);
    }
  },
  async getUserInfo() {
      try {
        // 发起 GET 请求，获取用户信息
        const response = await axios.get(`https://localhost:7293/api/Users/${this.payload.userId}`);

        // 假设返回的用户信息存储在 response.data 中
        const userInfo = response.data;

        // 进行登录成功后的逻辑处理
        // ...
        const userId = response.data.userId;
        localStorage.setItem('userId', userId);//将用户id储存到本地以便于随时调用
        console.log(userInfo);

      } catch (error) {
        // 处理登录失败后的逻辑
        console.error('Login failed:', error);
      }
    }
  }
};
</script>
<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-form {
  max-width: 400px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 20px; /* 添加间距 */
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #337ab7;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #23527c;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>